//
//  MainView.swift
//  GithubUserSet
//
//  Created by Golden Jellyfish on 2025/9/4.
//

import SwiftUI
/*
struct MainView: View {
    @State private var isPickerPresented = false
    @State private var selectedValue = "03"
    @State private var confirmedValue: String? = nil
    let options = ["01", "02", "03", "04", "05", "06", "07"]

    var body: some View {
        NavigationView {
            Form {
                HStack {
                    Text("Title")
                    Spacer()
                    Text(confirmedValue ?? "Please enter")
                        .foregroundColor(confirmedValue == nil ? .gray.opacity(0.7) : .primary)
                }
                .contentShape(Rectangle())
                .onTapGesture {
                    // **关键：在 withAnimation 闭包里改变状态**
                    withAnimation(.spring()) {
                        isPickerPresented = true
                    }
                }
            }
            .navigationTitle("Authentication")
        }
        // 看，我们现在用的是自己的修饰符！
        .customBottomSheet(isPresented: $isPickerPresented) {
            PickerSheetView(
                selectedValue: $selectedValue,
                options: options,
                onConfirm: { confirmed in
                    self.confirmedValue = confirmed
                    // 确认后，同样带动画关闭
                    withAnimation {
                        isPickerPresented = false
                    }
                },
                onCancel: {
                    // 取消后，带动画关闭
                    withAnimation {
                        isPickerPresented = false
                    }
                }
            )
        }
    }
}
*/

/*
struct MainView: View {
    @State private var isPickerPresented = false
    @State private var selectedValue = "03"
    @State private var confirmedValue: String? = nil
    let options = ["01", "02", "03", "04", "05", "06", "07"]

    var body: some View {
        NavigationView {
            // ... Form 内容不变 ...
            Form {
                HStack {
                    Text("Title")
                    Spacer()
                    Text(confirmedValue ?? "Please enter")
                        .foregroundColor(confirmedValue == nil ? .gray.opacity(0.7) : .primary)
                }
                .contentShape(Rectangle())
                .onTapGesture {
                    withAnimation(.spring()) {
                        isPickerPresented = true
                    }
                }
            }
            .navigationTitle("Authentication")
        }
        .customBottomSheet(isPresented: $isPickerPresented) {
            
            // --- 这里是实现溢出效果的关键 ---
            ZStack(alignment: .top) {
                
                // 底层：我们的弹框内容
                PickerSheetView(
                    selectedValue: $selectedValue,
                    options: options,
                    onConfirm: { confirmed in
                        self.confirmedValue = confirmed
                        withAnimation { isPickerPresented = false }
                    },
                    onCancel: {
                        withAnimation { isPickerPresented = false }
                    }
                )
                // 给弹框顶部留出空间，让图标可以放进来
                // 这里的 22pt 恰好是图标高度 44pt 的一半
                .padding(.top, 22)

                // 顶层：我们的装饰图标
                Image(systemName: "checkmark.circle.fill")
                    .font(.system(size: 44)) // 固定大小
                    .foregroundColor(.blue)
                    // 加一个白色背景，这样它就不会和弹框的分割线重叠
                    .background(Circle().fill(Color(.systemBackground)))
            }
        }
    }
}
 */

/*
struct MainView: View {
    @State private var isPickerPresented = false
    @State private var selectedValue = "03"
    @State private var confirmedValue: String? = nil
    let options = ["01", "02", "03", "04", "05"]

    var body: some View {
        NavigationView {
            Form {
                HStack {
                    Text("Title")
                    Spacer()
                    Text(confirmedValue ?? "Please enter")
                        .foregroundColor(confirmedValue == nil ? .gray.opacity(0.7) : .primary)
                }
                .contentShape(Rectangle())
                .onTapGesture {
                    withAnimation(.spring()) {
                        isPickerPresented = true
                    }
                }
            }
            .navigationTitle("Authentication")
        }
        // 使用我们全新的、更强大的修饰符
        .customBottomSheet(
            isPresented: $isPickerPresented,
            // `header` 闭包，定义悬浮的图标
            header: {
                Image(systemName: "checkmark.circle.fill")
                    .font(.system(size: 50)) // 使用常量
                    .foregroundColor(.blue)
                    .background(Circle().fill(Color(.systemBackground)))
            },
            // `content` 闭包，定义弹框的主要内容
            content: {
                PickerSheetView(
                    selectedValue: $selectedValue,
                    options: options,
                    onConfirm: { confirmed in
                        self.confirmedValue = confirmed
                        withAnimation { isPickerPresented = false }
                    },
                    onCancel: {
                        withAnimation { isPickerPresented = false }
                    }
                )
            }
        )
    }
}
 */

struct MainView: View {
    @State private var isPickerPresented = false
    @State private var selectedValue = "03"
    @State private var confirmedValue: String? = nil
    let options = ["01", "02", "03", "04", "05"]

    // 定义一个统一、清脆的动画
    let bottomSheetAnimation: Animation = .interpolatingSpring(stiffness: 300, damping: 30)

    var body: some View {
        NavigationView {
            Form {
                HStack {
                    Text("Title")
                    Spacer()
                    Text(confirmedValue ?? "Please enter")
                        .foregroundColor(confirmedValue == nil ? .gray.opacity(0.7) : .primary)
                }
                .contentShape(Rectangle())
                .onTapGesture {
                    // 关键点1: 弹出时使用我们定义的动画
                    withAnimation(bottomSheetAnimation) {
                        isPickerPresented = true
                    }
                }
            }
            .navigationTitle("Authentication")
        }
        .customBottomSheet(
            isPresented: $isPickerPresented,
            header: {
                Image(systemName: "checkmark.circle.fill")
                    .font(.system(size: 50))
                    .foregroundColor(.blue)
                    .background(Circle().fill(Color(.systemBackground)))
            },
            content: {
                PickerSheetView(
                    selectedValue: $selectedValue,
                    options: options,
                    onConfirm: { confirmed in
                        self.confirmedValue = confirmed
                        // 关键点2: 点击确认关闭时，也必须使用同样的动画
                        withAnimation(bottomSheetAnimation) {
                            isPickerPresented = false
                        }
                    },
                    onCancel: {
                        // 关键点3: 点击取消或遮罩关闭时，也必须使用同样的动画
                        // (遮罩的关闭动画是在 Modifier 内部处理的，我们也需要确保它使用同样的动画类型)
                        withAnimation(bottomSheetAnimation) {
                            isPickerPresented = false
                        }
                    }
                )
            }
        )
    }
}

#Preview {
    MainView()
}
